<template>
  <div class="table-box">
    <KingTable ref="kingTable" :tableOptions="_tableOptions" :request-api="queryTableData">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'export'" type="primary" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" @click="openDialog(scope.row)"> 查看 </el-button>
      </template>
    </KingTable>
    <detail ref="detailRef" />
  </div>
</template>

<script setup lang="tsx" name="OperlogList">
import { ref, reactive } from "vue";
import { User } from "@/api/interface";
import { useDownload } from "@/hooks/useDownload";
import { ElMessageBox } from "element-plus";
import KingTable from "@/components/KingTable/index.vue";
import detail from "./components/operlogDetail.vue";
import { KingTableInstance, TableColumnProps, SearchColumnProps } from "@/components/KingTable/interface";
import { Download } from "@element-plus/icons-vue";
import { exportUserInfo } from "@/api/modules/user";
import http from "@/api";

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref<KingTableInstance>();
const detailRef = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ EQ_ss: 1 });

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 KingTable 组件上绑定	:requestApi="getUserList"
const queryTableData = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.GTE_operTime = newParams.createTime[0]);
  newParams.createTime && (newParams.LTE_operTime = newParams.createTime[1]);
  delete newParams.createTime;
  return http.post("monitor/operlog/query", newParams);
};

// 表格配置项
const _tableCols: TableColumnProps<User.ResUserList>[] = [
  // { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "operName",
    label: "操作人员",
    width: 100
  },
  {
    prop: "operUrl",
    label: "请求地址",
    width: 180,
    overflow: true
  },
  {
    prop: "requestMethod",
    label: "请求方式",
    width: 100
  },
  { prop: "operIp", label: "请求IP", width: 120 },
  { prop: "status", label: "操作状态", width: 100, dictCode: "sys_common_status" },
  { prop: "operTime", label: "操作日期", width: 180 },
  {
    prop: "returnTime",
    label: "响应时间",
    width: 180
  },
  { prop: "timeConsuming", label: "耗时", width: 100 },
  { prop: "operParam", label: "请求参数", width: 180, overflow: true },
  { prop: "jsonResult", label: "返回参数", width: 180, overflow: true },
  {
    prop: "cts",
    label: "创建时间",
    width: 180
  },
  { prop: "operation", label: "操作", fixed: "right", width: 120 }
];

const _searchCols: SearchColumnProps<User.ResUserList>[] = [
  {
    prop: "operName",
    label: "操作人员",
    width: 100,
    el: "input"
  },
  {
    prop: "requestMethod",
    label: "请求方式",
    width: 100,
    el: "input"
  },
  { prop: "operIp", label: "请求IP", width: 120, el: "input" },
  {
    prop: "operTime",
    label: "操作时间",
    width: 180,
    // 自定义 search 显示内容
    // el: "date-picker",
    // span: 2,
    // props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
    // defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
    // render: () => {
    //   return (
    //     <div class="flx-center">
    //       <el-date-picker
    //         model-value={[value1, value2]}
    //         type="daterange"
    //         range-separator="To"
    //         start-placeholder="Start date"
    //         end-placeholder="End date"
    //       />
    //     </div>
    //   );
    // }
    render: (scope: any) => {
      // value={scope.modelValue}
      //     onInput={(value: any) => (scope.modelValue = value)}
      return (
        <el-date-picker
          model-value={scope.modelValue}
          type="datetimerange"
          range-separator="-"
          start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      );
    }
  }
];

const _tableOptions = {
  title: "操作日志",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam,
  doBeforeQuery: (beforeParams: any) => {
    //请求前处理参数
    if (beforeParams.operTime) {
      beforeParams.GTE_operTime = beforeParams.operTime[0];
      beforeParams.LTE_operTime = beforeParams.operTime[1];
      delete beforeParams.operTime;
    }
    return beforeParams;
  }
};

// 导出列表
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exportUserInfo, "列表", kingTable.value?.searchParam)
  );
};

const openDialog = (row: any) => {
  detailRef.value.showDialog(row);
};
</script>
